import { useState } from 'react';
import { request } from '@/request';
import { JoinIcon } from '@/components/icons';
import { Modal } from '@/components';
import { useModal } from '@/hooks';

const GroupJoin = ({ refetch }) => {
   const [code, setCode] = useState('');
   const { isOpen, openModal, closeModal } = useModal();
   const handleJoin = () => {
      request('/groups/join', {
         method: 'POST',
         data: {
            code,
         },
         success: () => {
            closeModal();
            refetch();
         },
         showSuccess: true,
      });
   };

   const handleChange = (e) => {
      const { value } = e.target;
      setCode(value);
   };

   const handleOpen = () => {
      setCode('');
      openModal();
   };

   return (
      <div>
         <JoinIcon type="primary" size={24} onClick={handleOpen} />
         <Modal
            isOpen={isOpen}
            onClose={closeModal}
            showClose
            header="加入新组织"
         >
            <div className="form-item-content">
               <label>邀请码</label>
               <input value={code} onChange={handleChange} />
            </div>
            <div className="btn mt-4 text-sm" onClick={handleJoin}>
               确认
            </div>
         </Modal>
      </div>
   );
};
export default GroupJoin;
